<template>
  <div
    class="animate-pulse space-y-6 rounded-2xl bg-white p-6 shadow-xl md:p-8"
  >
    <div class="flex items-center gap-6">
      <div class="h-24 w-24 rounded-full bg-gray-200" />
      <div class="flex-1 space-y-4">
        <div class="h-6 w-1/2 rounded bg-gray-200" />
        <div class="h-4 w-1/3 rounded bg-gray-200" />
      </div>
    </div>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
      <div class="space-y-2">
        <div class="h-4 w-24 rounded bg-gray-200" />
        <div class="h-6 w-full rounded bg-gray-200" />
      </div>
      <div class="space-y-2">
        <div class="h-4 w-24 rounded bg-gray-200" />
        <div class="h-6 w-full rounded bg-gray-200" />
      </div>
    </div>
    <div class="space-y-2">
      <div class="h-4 w-24 rounded bg-gray-200" />
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div class="h-14 rounded-lg bg-gray-200" />
        <div class="h-14 rounded-lg bg-gray-200" />
      </div>
    </div>
    <div class="flex justify-end">
      <div class="h-10 w-32 rounded bg-gray-200" />
    </div>
  </div>
</template>
